<template>
    <view class="component-worker-item">
        <view class="head">
            <image class="cover" :src="data.avatar" mode="aspectFill" />
            <text v-if="showPrice" class="price">¥ {{ utils.formatNumber(data.price || 0, 2) }}</text>
        </view>
        <view class="desc">
            <view class="name">
                <text>{{ data.name }}</text>
            </view>
            <view class="type" :style="{ color: typeTextColor }">
                <text>{{ typeText }}</text>
            </view>
            <view class="detail">
                <text class="section-text">服务{{ data.times || 0 }}次</text>
                <text class="section-text">好评率{{ data.favorableRate || 0 }}%</text>
                <text class="section-text">评分{{ data.grade || 0 }}/5.0 </text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "component-worker-item",
    data() {
        return {
            utils: this.$utils,
            models: this.$models,
            typeText: "",
            typeTextColor: "",
        };
    },
    props: {
        showPrice: {
            type: Boolean,
            default: true,
        },
        data: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {
        let [typeText, typeTextColor] = this.$models.worker.workerTypeText(this.data.type);
        this.typeText = typeText;
        this.typeTextColor = typeTextColor;
    },
    destroyed() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.component-worker-item {
    width: 100%;
    display: flex;
    align-items: center;
    .head {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-right: 28rpx;
        .cover {
            width: 110rpx;
            height: 110rpx;
            box-sizing: border-box;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 8rpx;
        }
        .price {
            font-size: 26rpx;
            font-weight: bold;
            color: #ec7655;
        }
    }
    .desc {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        line-height: 28rpx;
        .name {
            font-size: 28rpx;
            color: #010101;
        }
        .type,
        .detail {
            font-size: 24rpx;
            font-weight: bold;
        }
        .type {
            display: inline-block;
            // color: #d9a019;
            margin: 20rpx 0;
        }
        .detail {
            color: #999999;
        }
        .section-text::after {
            display: inline-block;
            content: "|";
            margin: 0 10rpx;
        }
        .section-text:last-child::after {
            display: none;
            content: "";
        }
    }
}
</style>